<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:replace="layout-vue">
<head>
    <meta charset="UTF-8">


    <th:block th:fragment="header">
        <style>
            tr.deleted1{
                color:gray;
            }


        </style>
    </th:block>

</head>
<body>

<div class="container-lg" id="container" th:fragment="content">
    <div id="app" class="card">

        <div class="card-header">
            <h3 class="card-title"> 素材库 </h3>
        </div>
        <div class="card-body">
            <div>
                <input name="path" v-model="uploadData.path">
                <input name="file" type="file">
                <button @click="upload()">上传</button>
            </div>
            <div> 状态：<select v-model="selector.target.refundStatus">
                <option value="">全部</option>
                <option value="0">未退款</option>
                <option value="1">已退款</option>
            </select>

                关键词：<input placeholder="名称" v-model="selector.keyword">
                <button onclick="loadData()">Search</button>
                每页<input type="number" min="1" v-model="selector.pageSize">条，
                第<input type="number" min="1" :max="Math.ceil(total/selector.pageSize)" v-model="selector.pageNo">页，
                共{{total}}条 {{Math.ceil(total/selector.pageSize)}}页
            </div>
            <table class="table table-hover table-bordered">
                <tr>
                    <td>#</td>
                    <td>ID</td>
                    <td>PATH</td>
                    <td>HAME</td>
                    <td>SIZE</td>
                    <td>TYPE</td>
                    <td>创建时间</td>
                    <td> -</td>
                </tr>
                <template v-for="(res,index) in list">
                    <tr>
                        <td>{{index+1}}</td>
                        <td>{{res.id}}</td>

                        <td>{{res.path}}</td>
                        <td>{{res.filename}}</td>
                        <td>{{res.size}}</td>
                        <td>{{res.contentType}}</td>
                        <td>{{new Date(res.createdAt).toLocaleString()}}</td>
                        <td> -</td>
                    </tr>
                </template>
            </table>

        </div>

        <div style="position:fixed;right:10px;bottom:10px;">

        </div>

    </div>


</div>

<th:block th:fragment="footer">
    <script>

var statusList = [
    {id: 0, name:"未完成"},
    {id: 1, name:"已退款"}
]


function newPaper(){
    var printing = {
        name:''
    };
    app.$data.list.push(printing);
}
const { createApp } = Vue;
    var app = createApp({
    data() {
      return { 
        list:[], statusList:statusList,
        currentIndex : -1,total:0,uploadData:{},
        selector:{target:{},withShop:1,withTrade:1,withSeller:1,pageSize:100,pageNo:1}
      }
    },methods:{
        submit:function (index){
            var data = this.list[index] || this.list;

        },getStatus(id){
            for(var i=0;i<this.statusList.length;i++){
                if(id == this.statusList[i].id) return this.statusList[i];
            }
            return null;
        },upload:function(){
             var form = new FormData();
             form.append("path",this.uploadData.path);
             var fls = document.querySelector("[type=file]").files;
             for(var i=0;i<fls.length;i++){
                form.append("file", fls[i]);
             }
             axios.post("/resource/file/upload", form).then( (res) => {
                console.log("response",res)
                //this.ok = res.data.ok;
                //this.fail = res.data.fail;

            }).catch(function (error) {
                console.log("error",error);
            });
        }
     },
    watch:{
        selector:{
            handler:function(nv,ov){
                loadData()
            },deep:true
        }
    }
  }).mount('#app');


function loadData( ){
    var selector = app.$data.selector || {}
    axios.post('/resource/file/list', selector).then(function (response) {
        console.log("response",response)
        app.$data.list = response.data.data;
        app.$data.total = response.data.total || 0;
    }).catch(function (error) {
        console.log("error",error);
    });
}

window.onload=function(){
   loadData( );
}









    </script>
</th:block>
</body>
</html>